<template>
  <view class="page">
    <banner :position="11" height="300rpx"></banner>

    <view class="header">
      <view class="block" style="height: 384rpx; display: flex; flex-direction: column">
        <!--				邀请好友返现-->
        <view class="container" style="height: 0; flex: 1">
          <view class="title">邀请好友返现</view>
          <view
            class="content-1"
            @click="() => $uni.navigateTo({ url: '/markingCampaign/pages/partTimeJobRecruit/rewardingInvitations/index' })"
          >
            <image class="icon" :src="getShowNginxPicUrl('3THNET9TyVEMu7Xia1Ff.png')"></image>
            <view class="info">
              <view class="title">邀请有礼</view>
              <view class="desc">邀TA勤工俭学</view>
            </view>
          </view>
        </view>
        <!--				加入兼职团队-->
        <view class="container" style="margin-top: 40rpx; height: 0; flex: 1">
          <view class="title">加入兼职团队</view>
          <view
            class="content-1"
            @click="
              () =>
                $uni.navigateTo({
                  url: handleUrlParams('/markingCampaign/pages/dailyNews/partTimeJobRecruit/workStudyProgram/introduce', {
                    sourceLocation: '兼职招募首页',
                    redirectUrl: encodeURIComponent('/markingCampaign/pages/dailyNews/partTimeJobRecruit/index/index'),
                  }),
                })
            "
          >
            <image class="icon" :src="getShowNginxPicUrl('GU6WZpXW6BWUze9Auwvc.png')"></image>
            <view class="info">
              <view class="title">勤工助学</view>
              <view class="desc">仅限学生报名</view>
            </view>
          </view>
        </view>
      </view>
      <view class="block">
        <!--				每日更新-->
        <view class="container" style="height: 384rpx">
          <view class="title">每日更新</view>
          <view class="content-2">
            <!--						就业资料包-->
            <!--						跳腾讯文档-->
            <view
              class="item"
              @click="
                () =>
                  $uni.navigateToMiniProgram({
                    appId: 'wxd45c635d754dbf59',
                    path: 'pages/detail/detail?url=https://docs.qq.com/sheet/DRG1CTmhuWGlVTW5U?tab=BB08J2',
                  })
              "
            >
              <image class="icon" :src="getShowNginxPicUrl('WhY9X8ZWGXrC9QfdY9nD.png')"></image>
              <view class="info">
                <view class="title">就业资料包</view>
                <view class="desc">简历模板就业指南</view>
              </view>
            </view>
            <!--						就业资讯-->
            <view
              class="item"
              @click="() => $uni.navigateTo({ url: '/markingCampaign/pages/partTimeJobRecruit/recruitInformation/index' })"
            >
              <image class="icon" :src="getShowNginxPicUrl('XTzdg1sNw6q0apuUqD7x.png')"></image>
              <view class="info">
                <view class="title">就业资讯</view>
                <view class="desc">实习校招信息汇总</view>
              </view>
            </view>
            <!--						兼职信息-->
            <view class="item" @click="() => $uni.navigateTo({ url: '/markingCampaign/pages/dailyNews/partTimeJobRecruit/index/index' })">
              <image class="icon" :src="getShowNginxPicUrl('yrkY0HvsLQpWPRYAouXT.png')"></image>
              <view class="info">
                <view class="title">兼职信息</view>
                <view class="desc">我要开始勤工助学</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="content">
      <view class="block">
        <view class="tab-list">
          <view
            class="tab-item"
            v-for="item in tabList"
            :key="item.label"
            @click="() => tabItemClick(item)"
            :class="{ active: item.label === currentSelectTab }"
          >
            <text>{{ item.label }}</text>
          </view>
        </view>

        <view class="content">
          <partTimeJobList v-if="currentSelectTab === '兼职信息'" ref="partTimeJobList"></partTimeJobList>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import banner from "@/components/banner.vue"
import { getShowNginxPicUrl } from "@/utils/settings"
import shareInfo from "@/utils/shareInfo"
import urlUtils from "@/utils/urlUtils"
import partTimeJobList from "./components/partTimeJobList.vue"
import { handleUrlParams } from "@/utils"

export default {
  methods: {
    handleUrlParams,
    getShowNginxPicUrl,
    tabItemClick(item) {
      switch (item.label) {
        case "就业资讯":
          uni.navigateTo({
            url: item.redirectPath,
          })
          break
        default:
          this.currentSelectTab = item.label
          break
      }
    },
  },
  components: { banner, partTimeJobList },
  data() {
    return {
      currentSelectTab: "",
      tabList: [
        {
          label: "兼职信息",
        },
        {
          label: "就业资讯",
          redirectPath: "/markingCampaign/pages/partTimeJobRecruit/recruitInformation/index",
        },
      ],
    }
  },
  onLoad(query) {
    if (query.currentSelectTab) {
      this.currentSelectTab = query.currentSelectTab
    } else {
      this.currentSelectTab = this.tabList[0].label
    }
  },
  //页面拉到底部时触发
  onReachBottom() {
    switch (this.currentSelectTab) {
      case "兼职信息":
        this.$refs.partTimeJobList.loadMore()
        break
    }
  },
  //右上角分享
  async onShareAppMessage() {
    return await shareInfo.getDefaultShareInfo({
      path: urlUtils.getCurrentPageUrl(),
    })
  },
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: var(--gray-background-color);
  padding-bottom: env(safe-area-inset-bottom);
  > .header {
    margin-top: 30rpx;
    display: flex;
    padding: 0 30rpx;
    > .block {
      width: 0;
      flex: 1;
      &:not(:last-child) {
        margin-right: 38rpx;
      }
      > .container {
        background: #ffffff;
        box-shadow: 0 0 12rpx 2rpx rgba(0, 0, 0, 0.1);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        padding: {
          left: 28rpx;
          right: 28rpx;
          top: 14rpx;
        }
        width: 100%;
        > .title {
          font-size: 32rpx;
          font-weight: 500;
        }
        > .content-1 {
          margin-top: 6rpx;
          display: flex;
          align-items: center;
          > .icon {
            width: 108rpx;
            height: 108rpx;
          }
          > .info {
            margin-left: 20rpx;
            > .title {
              font-size: 28rpx;
            }
            > .desc {
              margin-top: 4rpx;
              color: #999999;
              font-size: 22rpx;
            }
          }
        }
        > .content-2 {
          margin-top: 30rpx;
          > .item {
            display: flex;
            align-items: center;
            &:not(:first-child) {
              margin-top: 36rpx;
            }
            > .icon {
              width: 66rpx;
              height: 66rpx;
            }
            > .info {
              margin-left: 20rpx;
              > .title {
                font-size: 28rpx;
              }
              > .desc {
                margin-top: 2rpx;
                color: #999999;
                font-size: 22rpx;
              }
            }
          }
        }
      }
    }
  }

  > .content {
    padding: 40rpx 30rpx;
    > .block {
      background: #fcf3e7;
      border-radius: 20rpx;
      padding: {
        left: 20rpx;
        right: 20rpx;
        bottom: 30rpx;
      }
      > .tab-list {
        display: flex;
        font-size: 30rpx;
        justify-content: space-around;
        .tab-item {
          position: relative;
          padding: 30rpx 0;
          &.active {
            color: #2cb980;
          }
          //	下面的文章内容容器顶部的三角形
          &.active::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 20rpx solid transparent;
            border-right: 20rpx solid transparent;
            border-bottom: 20rpx solid white;
          }
        }
      }
      > .content {
        background: white;
        padding: 0 20rpx;
        border-radius: 20rpx;
      }
    }
  }
}
</style>
